<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
        }

        .area {
            width: 300px;
            height: 300px;
            margin: 50px auto;
            background: #ffa555;
        }

        ul {
            width: 300px;
            height: 300px;
            position: relative;
        }

        li {
            position: absolute;
            width: 50px;
            height: 50px;
            background: #000000;
            font-size: 12px;
            color: #ffffff;
            line-height: 50px;
            text-align: center;
            cursor: pointer;
            user-select: none;
        }

        .countDown {
            margin: 0 auto;
            text-align: center;
        }

        .grade {
            margin: 10px auto;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="area">
        <ul></ul>
    </div>
    <div class="countDown">10s后结束</div>
    <div class="grade">砸中了0次</div>

    <script>

        // 实现思路
        // 随机1~3只地鼠在场地上随机出现在不同的位置 --- 随机数+定位
        // 打地鼠 --- 点击事件，点击之后更改样式并记录分数
        // 一段时间后地鼠会逃跑 --- 批量删除盒子
        // 计时器和积分器

        var oUl = get("ul");

        // 积分器
        var count = 0;
        var oG = get(".grade");

        // 计时器
        var time = 10;
        var oT = get(".countDown")

        out();

        setInterval(round, 1000);

        // 10s为一轮
        function round() {
            if (time !== 0) {
                time--;
                oT.innerHTML = time + "s后结束";
            }
            else {
                // clearInterval(round);
                alert("你打中了" + count + "只");
                count = 0;
                oG.innerHTML = "砸中了" + count + "次";
                time = 11;
                oT.innerHTML = time + "s后结束";
            }
        }


        // 地鼠逃跑后再次出现
        var t = setInterval(function () {

            console.log(oUl.children.length);

            // oUl.children.length会随着删除动态变化，会出现bug
            // 用i--代替i++
            // for (var i = oUl.children.length - 1; i >= 0; i--) {
            //     oUl.removeChild(oUl.children[i]);
            //     console.log(i, oUl.children.length);
            // }
            oUl.innerHTML = '';
            out();
        }, 1000)

        // 封装函数 --- 地鼠出现
        function out() {
            // 地鼠出现的数量
            var num = Math.ceil(Math.random() * 3);

            // 让地鼠出现在场地上
            for (var i = 0; i < num; i++) {
                oUl.innerHTML += `<li></li>`
            }

            var oLi = get("li");
            var oLis = getAll("li");

            var scale = oUl.offsetWidth / oLi.offsetWidth - 1;
            // console.log(scale);

            for (var i = 0; i < oLis.length; i++) {
                var x = Math.round(Math.random() * scale) * oLi.offsetWidth;
                var y = Math.round(Math.random() * scale) * oLi.offsetHeight;
                // console.log(x, y);

                oLis[i].style.left = x + "px";
                oLis[i].style.top = y + "px";
                oLis[i].innerHTML = "地鼠";

                // 打地鼠
                oLis[i].onclick = function () {
                    this.style.background = "red";
                    this.innerHTML = "打中了";
                    count++;
                    oG.innerHTML = "砸中了" + count + "次";
                }
            }
        }

        // 封装函数 --- 获取值
        function get(a) {
            return document.querySelector(a);
        }
        function getAll(a) {
            return document.querySelectorAll(a);
        }

    </script>

</body>

</html>